<template>
  <view
    class="tags"
    :class="tagsClass"
  >
    <view
      v-for="(item,index) in items"
      :key="index"
      :style="item.color?{color:item.color}:''"
      class="tags-item"
    >{{item.text}}</view>
  </view>
</template>

<script>
export default {
  options: {
    styleIsolation: 'isolated'
  },
  name: 'Tags',
  props: {
    items: Array,
    separator: {
      type: Boolean,
      default: false
    }
  },
  computed: {
    tagsClass () {
      return this.separator ? 'tags-separator' : ''
    }
  }
}
</script>

<style lang="less">
.tags {
  display: flex;
  align-items: center;
  &-item {
    font-size: 12px;
    color: #999;
    padding-right: 5px;
    margin-right: 5px;
    display: inline-flex;
    align-items: center;
    &:last-child {
      margin-right: 0;
      padding-right: 0;
    }
  }
  &-separator {
    .tags-item {
      position: relative;
      &::after {
        position: absolute;
        right: 0;
        top: 10%;
        height: 80%;
        width: 1px;
        background: #ccc;
        transform: scale(0.5);
        content: "";
      }
      &:last-child::after {
        display: none;
      }
    }
  }
}
</style>
